<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体现Vue数据双向绑定模板</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h1>{{a}}</h1>
		<div id="app">
		<h2>{{a}}</h2>
		<h3>{{a}}</h3>
		<h4>{{a}}</h4>
		<h5>{{a}}</h5>
		<h6>{{a}}</h6>
		
		<!--要操作Vue的数据，必须设置一个指令 v-model
		1、操作页面元素View，数据Model发生变化
		2、操作数据MOdel，页面元素内容View随之改变
		Vue和js、jquery有本质区别：
		1、js它专门有一套api需要学习，需要额外记忆
		2、jQuery本质封装js，简化js写法，又独创一套api，需要额外记忆
		3、Vue完全不同思路，只需操作数据input.text,div，不同的组件操作数据，无需额外记忆
		Vue替代js和JQuery
		-->
		<input type="text" id="a" v-model="a" />
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				a:"北京天安门"
			}
		})
	</script>
</html>
